<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>完美拖拽</title>
    <style type="text/css">
        html,body{overflow:hidden;}
        body,div,h2,p{margin:0;padding:0;}
        body{color:#fff;background:#000;font:12px/2 Arial;}
        p{padding:0 10px;margin-top:10px;}
        span{color:#ff0;padding-left:5px;}
        #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}
        #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
        #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
    </style>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oBox=document.getElementById("box");
            var oH2 = oBox.getElementsByTagName("h2")[0];
            var oA = oBox.getElementsByTagName("a")[0];
            var aSpan = oBox.getElementsByTagName("span");
            var disX = disY = 0;
            var bDrag = false;
            var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}];

            //鼠标按下, 激活拖拽
            oH2.onmousedown = function (event)
            {
                var event = event || window.event;
                bDrag = true;
                disX = event.clientX - oBox.offsetLeft;
                disY = event.clientY - oBox.offsetTop;

                aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop});
                this.setCapture && this.setCapture();

                return false
            };

            //拖拽开始
            document.onmousemove = function (event)
            {
                if (!bDrag) return;
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
                var maxT = document.documentElement.clientHeight - oBox.offsetHeight;

                iL = iL < 0 ? 0 : iL;
                iL = iL > maxL ? maxL : iL;

                iT = iT < 0 ? 0 : iT;
                iT = iT > maxT ? maxT : iT;

                oBox.style.marginTop = oBox.style.marginLeft = 0;
                oBox.style.left = iL + "px";
                oBox.style.top = iT + "px";

                aPos.push({x:iL, y:iT});

                status();

                return false
            };

            //鼠标释放, 结束拖拽
            document.onmouseup = window.onblur = oH2.onlosecapture = function ()
            {
                bDrag = false;
                oH2.releaseCapture && oH2.releaseCapture();
                status()
            };

            //回放拖动轨迹
            oA.onclick = function ()
            {
                if (aPos.length == 1) return;
                var timer = setInterval(function ()
                {
                    var oPos = aPos.pop();
                    oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
                }, 30);

                this.focus = false;//去除链接虚线

                return false
            };

            //阻止冒泡
            oA.onmousedown = function (event)
            {
                (event || window.event).cancelBubble = true
            };

            //监听状态函数
            function status ()
            {
                aSpan[0].innerHTML = bDrag;
                aSpan[1].innerHTML = oBox.offsetTop;
                aSpan[2].innerHTML = oBox.offsetLeft
            }

            //初始调用
            status();
        };
    </script>
</head>
<body>
<div id="box">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span></span></p>
    <p><strong>offsetTop:</strong><span></span></p>
    <p><strong>offsetLeft:</strong><span></span></p>
</div>
</body>
</html>
